<template>
    <div>
        <ul>
            <li v-for="item in list" :key="item.id" :class="colorId === item.id ? 'color' : ''" @click="click(item.id)">
                {{ item.name }}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    id: 1,
                    name: '一句诗词'
                },
                {
                    id: 2,
                    name: '励志歌词'
                },
                {
                    id: 3,
                    name: '毒鸡汤'
                }
            ],
            colorId: 1
        };
    },
    methods: {
        click(i) {
            this.colorId = i;
            if (i === 1) {
                this.$router.push({
                    path: '/top'
                });
            } else if (i === 2) {
                this.$router.push({
                    path: '/center'
                });
            } else {
                this.$router.push({
                    path: '/bottom'
                });
            }
        }
    }
};
</script>

<style scoped lang="scss">
ul {
    text-align: center;
    li {
        color: #b8b8b8;
        font-size: 16px;
        margin: 8px 0;
        &:hover {
            color: #4caf50;
        }
    }
}
.color {
    color: #4caf50;
}
</style>
